<template>
	<view>
		<view class="form" >
		   <view class="form-item">
		        <text class="label">家庭成员关系</text>
				<picker @change="relationChange" :range="relationlist" range-key="title" class="flex ali-c" :style="{
				    color: info.relation ? '#000000' : '#888888'
				}">
				    {{ info.relation!==''? relationlist[info.relation].title : '请选择家庭成员关系' }}
				    <uni-icons type="right" color="#888888" size="16" />
				</picker>
		        <!-- <input v-model="info.nickname" placeholder="请输入家庭成员关系" /> -->
		    </view>
		   
		    <view class="form-item">
		        <text class="label">真实姓名</text>
		        <input v-model="info.name" placeholder="请输入真实姓名" />
		    </view>
			<view class="form-item">
			    <text class="label">手机号</text>
			    <input  v-model="info.mobile" placeholder="请输入手机号" type="number" />
			</view>
			<view class="form-item">
			    <text class="label">性别</text>
			    <picker @change="sexChange" :range="sexlist" range-key="title" class="flex ali-c" :style="{
			        color: info.sex ? '#000000' : '#888888'
			    }">
			        {{ info.sex!=='' ? sexlist[info.sex].title : '请选择性别' }}
			        <uni-icons type="right" color="#888888" size="16" />
			    </picker>
			</view>
			<view class="form-item">
			    <text class="label">出生日期</text>
			    <picker @change="birthChange" mode="date" class="flex ali-c" :style="{
			        color: info.brithday ? '#000000' : '#888888'
			    }">
			        {{ info.brithday ? info.brithday : '请选择出生日期' }}
			        <uni-icons type="right" color="#888888" size="16" />
			    </picker>
			</view>
			<view class="jiabox" @click="addfamily()">
				编辑家庭成员<image src="../../static/jia.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fd:true,
				info:{
					relation:'',
					name:'',
					mobile:'',
					sex:'',
					brithday:'',
				},
				sexlist:[{id:0,title:'保密'},{id:1,title:'男'},{id:2,title:'女'}],//性别0保密1男2女
				relationlist:[{id:1,title:'父母'},{id:2,title:'配偶'},{id:3,title:'子女'},{id:4,title:'其它'},
				{id:5,title:'老人'},{id:6,title:'本人'}],//1父母2配偶3子女4其它5老人6本人
				relationindex:''
			}
		},
		onLoad(option) {
			this.getinfo(option.id)
		},
		methods: {
			getinfo(id){
				this.$http({
					url:'/api/Activity/detail_family',
					data:{
						id:id
					}
				}).then(res=>{
					this.info = res.data
					this.info.relation = parseInt(this.info.relation)-1
				})
			},
			relationChange({ detail: { value } }) {
			    this.info.relation = value
				// this.relationindex = value
				console.log( this.info.relation,' this.form.relation')
			},
			addfamily(){
				// const data = this.familylist.filter(item => item.name!=='')
				// data.unshift({
				// 	sex:this.form.sex,
				// 	brithday: this.form.brithday,
				// 	name:this.form.name,
				// 	nickname:this.form.nickname,
				// 	number:this.form.phoneNumber,
				// })
				// console.log(this.familylist,data)
				if(this.fd){
					this.fd = false
					// this.info.relation = parseInt(this.info.relation)+1
					this.$http({
						url:'/api/Activity/edit_family',
						data:{
							...this.info,
							relation:parseInt(this.info.relation)+1
						}
					}).then(res=>{
						
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						uni.navigateBack({
							delta:1
						})
					}).finally(()=>{
						setTimeout(()=>{
							this.fd = true
						},1500)
					})
				}
				
			},
			sexChange({ detail: { value } }) {
			    this.info.sex = value
				console.log(this.info.brithday,e)
			},
			birthChange({ detail: { value } }) {
			    this.info.brithday = value
				console.log(this.info.brithday)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form {
	    padding: 0 30rpx;
	    background-color: white;
	    border-radius: 20rpx;
	
	    .form-item {
	        display: flex;
	        font-size: 32rpx;
	        font-weight: normal;
	        color: #555555;
	        padding: 40rpx 0;
	        justify-content: space-between;
	        align-items: center;
	        flex-wrap: wrap;
	        border-bottom: 1rpx solid rgba(0, 0, 0, .1);
	
	        input {
	            text-align: right;
	            color: #000000;
	        }
	    }
	
	    .form-item:last-child {
	        border-bottom: none;
	    }
		.jiabox{
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FF8A9B;
			color: #FFF;
			margin: 50rpx auto 0 auto;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 36rpx;
			image{
				width: 31rpx;
				height: 31rpx;
				margin-left: 12rpx;
			}
		}
	}

</style>
